
<template>
<!-- 结构 -->
<!-- 以后html的代码都写在 template标签中  -->
<!-- 注意vue2里只能有一个根元素 -->
  <div id="app">
    <!-- 使用组件的时候 就是当初标签来使用 -->
    <!-- <HmHeader></HmHeader>
    <HmHeader /> -->
    <!-- 1. 可以把大驼峰改成中横线形式来写  2. 组件可以按单标签使用 -->
    <hm-header />
    <hm-main />
    <hm-footer />
    <HmButton />
  </div>
</template>


<script>
// 导入组件使用
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
// 行为
// 导出的是当前组件的配置
// 内部有data  methods  computed   watch  生命周期函数...
export default {
  name: 'App',
  // key值是使用的名字 value 是导入的名字
  // 不要写成计算属性 (computed)
  components: {
   HmHeader,
   HmMain,
   HmFooter
  },
  // data 在组件中以函数的形式书写  return { 属性1, 属性2}
  data() {
     return {
      msg: '你好',
      name: '老韩'
     }
  },
  methods: {
    fn () {
      console.log('你好')
    }
  }
}
</script>

<style lang='less'>
/* 样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .box {
    width: 100px;
    height: 100px;
    background: red;
  }
}
</style>
